<template>
  <div style="width:50%">
    <a-form-model :label-col="{ span: 2 }" :wrapperCol="{ span: 14 }">
      <a-form-model-item label="网络适配器">
        <a-select style="width: 30%" @change="onNetChanged" v-model="curCard">
          <a-select-option v-for="d in ips" :key="d.cardName">
            {{ d.cardName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="IP模式">
        <a-radio-group v-model="netMode" default-value="static">
          <a-radio value="dhcp"> 启动DHCP </a-radio>
          <a-radio value="static"> 静态IP </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="IP地址">
        <a-input :disabled="netMode === 'dhcp'" v-model="ip"></a-input>
      </a-form-model-item>
      <a-form-model-item label="子网掩码">
        <a-input :disabled="netMode === 'dhcp'" v-model="mask"></a-input>
      </a-form-model-item>
      <a-form-model-item label="默认网关">
        <a-input :disabled="netMode === 'dhcp'" v-model="gateway"></a-input>
      </a-form-model-item>

      <a-form-model-item label="DNS地址">
        <a-input v-model="dns"></a-input>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 2 }">
        <a-space>
          <a-button type="primary" @click="refresh"> 刷新 </a-button>
          <a-button type="primary" @click="onSubmitIPAddr"> 下发 </a-button>
        </a-space>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { getAddr, setAddr } from "@/services/ipaddr.js";
export default {
  data() {
    return {
      netMode: "static",
      ip: "192.168.10.10",
      mask: "255.255.255.0",
      gateway: "192.168.10.1",
      dns: "114.114.114.114",
      cardName: "eth0",
      ips: [],
      curCard: "",
    };
  },
  created() {
    this.refresh();
  },
  methods: {
    onSubmitIPAddr() {
      //ip,mask,gw,dns,type,cardName
      setAddr(
        this.ip,
        this.mask,
        this.gateway,
        this.dns,
        this.netMode,
        this.cardName
      );
    },
    refresh() {
      let self = this;
      getAddr().then((ipbody) => {
        /*self.netMode = ipbody.type;
        self.ip = ipbody.ip;
        self.gateway = ipbody.gw;
        self.dns = ipbody.dns;
        self.cardName = ipbody.cardName;
        self.mask = ipbody.mask;*/
        console.log("***************", ipbody);
        self.ips = ipbody;
        if (ipbody && ipbody.length > 0) {
          self.curCard = ipbody[0].cardName;
          self.onNetChanged(self.curCard);
        }
      });
    },
    onNetChanged(value) {
      let net = this.ips.find((ip) => {
        return ip.cardName === value;
      });
      this.cardName = net.cardName;
      this.ip = net.ip;
      this.mask = net.mask;
      this.gateway = net.gw;
      this.dns = !net.dns ? this.dns : net.dns;
    },
  },
};
</script>